<template>
	<div id="aplayer"></div>
</template>

<script setup>
import APlayer from "aplayer"; // 引入音乐插件
import "APlayer/dist/APlayer.min.css";

import useFileDataStore from "~/stores/file-data";

let fileDataStore = useFileDataStore();

let route = useRoute();

watch(() => fileDataStore.audioArray, (newVal) => {
	let data = [];
	let currentAudioIndex = 0;
	newVal.forEach((item, index) => {
		if (item.name === fileDataStore.currentClickRow.name) {
			currentAudioIndex = index;
		}
		data.push({
			name: item.name,
			artist: ' ',
			url: item.url,
			cover: ''
		})
	});

	initAudio(data, currentAudioIndex);
})

// 当前播放的音频所在路径
let currPath = ''

// 当前播放视频的实例
let ap;

/**
 * 初始化音频组件
 * @param data      音频列表
 * @param index     默认播放第 N 首
 */
let initAudio = (data, index) => {
	// 如果音频列表为空，则直接返回
	if (data.length === 0) {
		return;
	}

	// 如果已经初始化过，则直接切换播放列表
	if (ap) {
		// 如果当前播放列表和之前一样，则不重新修改播放列表
		if (currPath !== route.params.fullpath) {
			ap.list.clear();
			ap.list.add(data);
		}
		currPath = route.params.fullpath
		ap.list.switch(index);
		ap.play();
	} else {
		// 创建一个音乐播放器实例，并挂载到 DOM 上，同时进行相关配置
		const el = document.getElementById("aplayer");
		ap = new APlayer({
			container: el,
			audio: data, // 音乐播放列表
			fixed: true, // 开启吸底模式
			autoplay: false, // 不开启自动播放
			preload: 'none' // 不预先加载
		});

		// 移除无用按钮, 添加按钮备注, 隐藏歌词功能
		el.getElementsByClassName("aplayer-miniswitcher")[0].click();
		el.getElementsByClassName('aplayer-icon-order')[0].setAttribute('title', '播放顺序');
		el.getElementsByClassName('aplayer-icon-loop')[0].setAttribute('title', '循环模式');
		el.getElementsByClassName('aplayer-icon-menu')[0].setAttribute('title', '播放列表');
		el.getElementsByClassName('aplayer-icon-lrc')[0].style.display = 'none';
		ap.play();
		currPath = route.params.fullpath
	}
};
</script>

<style scoped>

</style>